<template>
    <header>
        <HeaderBar></HeaderBar>
    </header>
    <main class="outer-container">
        <aside class="blog-vertical-menu">
            <a-menu mode="inline" :items="entities_store.left_up_menu"
                    v-model:selected-keys="transactions_store.file_list.show"
                    :inline-collapsed="entities_store.left_up_menu_collapsed"
                    :inline-indent="0"
                    @click="() => transactions_store.file_list.show = []"
            ></a-menu>
<!--                不知道为啥这样也行，点击的时候就清空，在有东西的时候就变成没东西，没东西的时候会变成有东西-->
        </aside>
        <div class="inner-container">
            <MyDrawer v-if="window_width < 600">
                <FileList></FileList>
            </MyDrawer>
            <div class="blog-split-view" v-if="transactions_store.file_list.show.length > 0 && window_width >= 600" :style="{width: width + 'px'}">
                <FileList></FileList>
            </div>
            <DragSize width_name="file_list" :min_width="min_width" :max_width="max_width"
                      v-if="transactions_store.file_list.show.length > 0 && window_width >= 600"></DragSize>
            <article :style="{'width': transactions_store.file_list.show.length > 0 && window_width >= 600 ? `calc(100% - ${width}px - 20px)` : '100%'}">
                <ArticlePreview></ArticlePreview>
            </article>
        </div>
    </main>
</template>

<script>
import FileList from "@/components/FileList.vue";
import HeaderBar from "@/components/HeaderBar.vue";
import {entities_store, transactions_store} from "@/global_store";
import ArticlePreview from "@/components/ArticlePreview.vue";
import DragSize from "@/components/utils/DragSize.vue";
import {ref} from "vue";
import MyDrawer from "@/components/MyDrawer.vue";
import {enable, disable, isEnabled} from "darkreader";

let can_size_change = true;

window.addEventListener("resize", () => {
    if (can_size_change) {
        can_size_change = false;
        setTimeout(() => {
            console.log("resize", window.innerWidth, window.innerHeight);
            transactions_store.window_width = window.innerWidth;
            can_size_change = true;
        }, 100);
    }
})

export default {
    name: 'App',
    components: {
        MyDrawer,
        DragSize,
        ArticlePreview,
        HeaderBar,
        FileList
    },
    data() {
        return {
        }
    },
    methods: {},
    computed: {
        entities_store() {
            return entities_store
        },
        transactions_store() {
            return transactions_store
        },
        window_width() {
            return transactions_store.window_width;
        },
        min_width() {
            return transactions_store.file_list.min_width;
        },
        max_width() {
            return transactions_store.file_list.max_width;
        },
        width() {
            return transactions_store.file_list.width;
        }
    },
    watch: {
        'entities_store.dark_mode'(new_value) {
            console.log('dark_mode', new_value);
            if (new_value) {
                enable(entities_store.darkreader_theme);
            } else {
                disable();
            }
        },
        'transactions_store.file_list.show'(new_value, old_value) {
            console.log(new_value, old_value);
            if (new_value.length > 0 && old_value.length <= 0) {
                if (this.window_width >= 600)
                    transactions_store.file_list.width = 300;
                transactions_store.aside_drawer = true;
            } else if (new_value.length <= 0 && old_value.length > 0) {
                transactions_store.file_list.width = 0;
                transactions_store.aside_drawer = false;
            }
        },
        'transactions_store.aside_drawer'(new_value, old_value) {
            if (new_value === false && old_value === true) {
                transactions_store.file_list.show = [];
            }
        }
    },
    mounted() {
        setInterval(() => {entities_store.dark_mode = isEnabled()}, 1000);
        // watch一个非响应式状态是无效的，只能固定每秒更新了，不过可能有循环更新的风险。
        // this.$watch(() => isEnabled(), (new_value, old_value) => {console.log(new_value, old_value)});

        function open_audio() {
            entities_store.sounds.can_play_audio = true;
            document.removeEventListener("click", open_audio);
        }

        document.addEventListener("click", open_audio);
    }
}
</script>

<style lang="scss">
:root {
    --blog-colour-lty: #66ccff;
    --blog-colour-yh: #00ffcc;
    --blog-colour-yzl: #ee0000;
    --blog-colour-yzly: #006666;
    --blog-colour-zymk: #0080ff;
    --blog-colour-mqx: #ffff00;
    --blog-colour-bg-active: #cce8cf66;
    --blog-colour-bg-hover: #cce8cf44;
    --blog-colour-bg-active-hover: #cce8cfaa;
    --blog-colour-qq-grey: #e5e5e5;
    --blog-colour-qq-blue: #12B7F5;
    //--darkreader-bg--blog-colour-bg-active: #ffffff22;
    //--darkreader-bg--blog-colour-bg-hover: #ffffff44;
    //--darkreader-bg--blog-colour-bg-active-hover: #ffffff44;
}

html {
    height: 100%;
}

body {
    height: calc(100% - 20px);
    width: calc(100% - 10px);
    //overflow: hidden;
}

#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    //text-align: center;
    //margin-top: 60px;
    display: block;
    height: calc(100% - 10px);
}

header {
    height: 3em;
}

main {
    display: block;
    flex-direction: row;
    width: 100%;
    height: calc(100% - 3em);
    text-align: justify;
}

.outer-container {
    display: flex;
    .inner-container {
        flex: 1;
    }
}

aside, .blog-split-view, .drag-size, article {
    display: inline-block;
    height: 100%;
    vertical-align: top;
}

.ant-menu-inline-collapsed {
    width: 2em;
}

.blog-split-view {
    min-width: 12em;
    overflow-y: scroll;
}

article {
    height: 100%;
}

//.el-switch__core .el-switch__action {
//    background-color: transparent;
//}
</style>
